<template>
  <div>
    <div class="modal">
      <div class="modal-bg"></div>
      <div class="sale">
        <div class="rele-titles"><img  @click="SaleClose" src="../assets/img/tub.png" alt="">
          <span  :class="{'title_class' : jibeninfo}" @click="infocli">楼盘录入</span>
          <span  :class="{'title_class' : jibenpic}" @click="piccli">图片上传</span>
        </div>
        <div v-show="jibeninfo">
          <div class="info">
            <!-- 基本信息 -->
            <div class="pub-title">
              基本信息
            </div>
            <ul class="info-list">
              <li>
                <div class="info-title">省份</div>
                <div class="info-input">
                  <select @change="getCity"   v-model="formDatas.province_code" placeholder="请选择" style="width:95%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in province_code1"
                      :key="item.CODE"
                      :label="item.region_name_c"
                      :value="item.CODE">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="info-title">城市</div>
                <div class="info-input">
                  <select @change="getArea" v-model="formDatas.city_code" placeholder="请选择" style="width:96%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in city_code1"
                      :key="item.CODE"
                      :label="item.region_name_c"
                      :value="item.CODE">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="info-title">区域</div>
                <div class="info-input">
                  <select   placeholder="请选择" v-model="formDatas.area_code" style="width:95%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in area_code1"
                      :key="item.CODE"
                      :label="item.region_name_c"
                      :value="item.CODE">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="info-title">片区</div>
                <div class="info-input">
                  <!--<el-select placeholder="请选择" v-model="street_id" style="width:95%;border: 1px solid #a0a0a0;">-->
                  <!--<el-option-->
                  <!--v-for="item in street_id1"-->
                  <!--:key="item.id"-->
                  <!--:label="item.title"-->
                  <!--:value="item.id">-->
                  <!--</el-option>-->
                  <!--</el-select>-->
                  <input type="text" v-model="formDatas.street" placeholder="请输入内容"style="width:90%;border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="info-title">街道地址</div>
                <div class="info-input">
                  <input type="text" placeholder="" v-model="formDatas.street_address" style="width:90%;border: 1px solid #a0a0a0;" placeholder="请输入街道">
                </div>
              </li>
              <li>
                <div class="info-title">楼盘名称</div>
                <div class="info-input">
                  <input type="" name="" placeholder="" v-model="formDatas.name" style="width:90%;border: 1px solid #a0a0a0;" placeholder="请输入名称">
                </div>
              </li>
              <li>
                <div class="info-title">物业公司</div>
                <div class="info-input">
                  <input type="" name="" placeholder="" v-model="formDatas.property_company" style="width:90%;border: 1px solid #a0a0a0;" placeholder="请输入公司">
                </div>
              </li>
              <li>
                <div class="info-title">开发商</div>
                <div class="info-input">
                  <input type="" name="" placeholder="" v-model="formDatas.developer" style="width:90%;border: 1px solid #a0a0a0;" placeholder="请输入开发">
                </div>
              </li>
              <li>
                <div class="info-title">案场电话</div>
                <div class="info-input">
                  <input type="" name="" placeholder="" v-model="formDatas.case_field_tel" style="width:90%;border: 1px solid #a0a0a0;" placeholder="请输入联系">
                </div>
              </li>
              <li>
                <div class="info-title">占地面积</div>
                <div class="info-input">
                  <input type="string" name="" placeholder="亩/㎡" v-model="formDatas.occupy_acreage" style="width:90%;border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="info-title">建筑面积</div>
                <div class="info-input">
                  <input type="string" name="" placeholder="㎡" v-model="formDatas.build_acreage" style="width:90%;border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="info-title">总户数</div>
                <div class="info-input">
                  <input type="string" name="" v-model="formDatas.all_house_num" style="width:90%;border: 1px solid #a0a0a0;" placeholder="请输入内容">
                </div>
              </li>
              <li>
                <div class="info-title">总楼栋数</div>
                <div class="info-input">
                  <input type="string" name="" v-model="formDatas.all_house_building_num" style="width:90%;border: 1px solid #a0a0a0;" placeholder="请输入总数">
                </div>
              </li>
              <li>
                <div class="info-title">容积率</div>
                <div class="info-input">
                  <input type="string" name="" v-model="formDatas.volumetric_rate" style="width:90%;border: 1px solid #a0a0a0;" placeholder="请输入内容">
                </div>
              </li>
              <li>
                <div class="info-title">预售证</div>
                <div class="info-input">
                  <select v-model="formDatas.pre_sale_certificate" placeholder="请选择" style="width:96%;border: 1px solid #a0a0a0;height: 28px">
                    <option
                      v-for="item in yushou"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                  <!--<input type="" name="" placeholder="" v-model="formDatas.pre_sale_certificate" style="width:82%;">-->
                </div>
              </li>
              <li>
                <div class="info-title">绿化率</div>
                <div class="info-input">
                  <input type="string" name="" v-model="formDatas.green_rate" style="width:90%;border: 1px solid #a0a0a0;" placeholder="请输入内容">
                </div>
              </li>
              <li>
                <div class="info-title">开盘时间</div>
                <div class="info-input">
                  <el-date-picker
                    v-model="formDatas.open_quota_date"
                    type="date"
                    placeholder="选择日期" style="width:95%;border: 1px solid #a0a0a0;">
                  </el-date-picker>
                </div>
              </li>
              <li>
                <div class="info-title">交房时间</div>
                <div class="info-input">
                  <el-date-picker
                    v-model="formDatas.hand_over_date"
                    type="date"
                    placeholder="选择日期" style="width:95%;border: 1px solid #a0a0a0;">
                  </el-date-picker>
                </div>
              </li>
              <li>
                <div class="info-title">房产证</div>
                <div class="info-input">
                  <select v-model="formDatas.house_property_certificate" placeholder="请选择" style="width:96%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in housezheng"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                  <!--<input type="" name="" placeholder="" v-model="formDatas.house_property_certificate" style="width:82%;">-->
                </div>
              </li>
              <li>
                <div class="info-title">物业费</div>
                <div class="info-input">
                  <input type="string" name="" placeholder="元/㎡" v-model="formDatas.property_cost" style="width:90%;border: 1px solid #a0a0a0;">
                </div>
              </li>
              <!--housezheng-->
              <li>
                <div class="info-title">楼盘概况</div>
                <div class="info-input">
                  <textarea  class="info-input_box" placeholder="请输入内容" v-model="formDatas.survey" name=""  id=""  rows="5"></textarea>
                </div>
              </li>

            </ul>
            <!-- 基本信息 -->
          </div>
          <!-- info-right -->
          <div class="info-right">
            <!--产品装修-->
            <!--<li>-->
            <!--<div class="info-title">装修</div>-->
            <!--<div class="info-input">-->
            <!--<el-select v-model="formDatas.renovation_id" placeholder="请选择" style="width:90%">-->
            <!--<el-option-->
            <!--v-for="item in renovation1"-->
            <!--:key="item.title"-->
            <!--:label="item.title"-->
            <!--:value="item.id">-->
            <!--</el-option>-->
            <!--</el-select>-->
            <!--</div>-->
            <!--</li>-->

            <div class="pub-title">
              装修类型
            </div>
            <div class="right">
              <el-checkbox-group v-model="renovation_id">
                <!--<el-checkbox v-for="item in renovation1" :key="item.id" :false-label=" " :true-label="item.id" :label="item.id">{{item.title}}</el-checkbox>-->
                <span v-for="(item,index) in renovation1" :key="index">
                  <el-checkbox :label="item.id">{{item.title}}</el-checkbox>
                </span>
                <!--<el-checkbox label="1">{{renovation1[0].title}}</el-checkbox>-->
                <!--<el-checkbox label="2"></el-checkbox>-->
                <!--<el-checkbox label="3"></el-checkbox>-->
              </el-checkbox-group>
            </div>

            <!--产品装修-->
            <!--产权年限-->
            <div class="pub-title">
              产权年限
            </div>
            <ul class="right">
              <li v-if="type_is_apartment === 1">
                <div class="right-title">公寓</div>
                <div class="right-input">
                  <select v-model="formDatas.pry_apartment_id" placeholder="请选择" style="width:95%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year_1"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li v-if="type_is_ocean === 1">
                <div class="right-title">洋房</div>
                <div class="right-input">
                  <select v-model="formDatas.pry_ocean_id" placeholder="请选择" style="width:95%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year_2"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li v-if="type_is_villa === 1">
                <div class="right-title">别墅</div>
                <div class="right-input">
                  <select v-model="formDatas.pry_villa_id" placeholder="请选择" style="width:95%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year_3"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li v-if="type_is_shops === 1">
                <div class="right-title">商铺</div>
                <div class="right-input">
                  <select v-model="formDatas.pry_shops_id" placeholder="请选择" style="width:95%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year_4"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li v-if="type_is_office === 1">
                <div class="right-title">写字楼</div>
                <div class="right-input">
                  <!-- BuildingValue -->
                  <select v-model="formDatas.pry_office_id" placeholder="请选择" style="width:95%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year_5"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li v-if="type_is_hotel === 1">
                <div class="right-title">酒店</div>
                <div class="right-input">
                  <select v-model="formDatas.pry_hotel_id" placeholder="请选择" style="width:95%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year_6"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li v-if="type_is_housing === 1">
                <div class="right-title">住宅</div>
                <div class="right-input">
                  <select v-model="formDatas.pry_housing_id" placeholder="请选择" style="width:95%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year_7"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
            </ul>
            <!--产权年限 end-->
            <!-- 产品类型 -->
            <div class="type">
              <div class="pub-title">
                产品类型
              </div>
              <ul class="right">
                <li style="width:94%; padding:0 3%">
                  <el-checkbox v-model="type_is_apartment" :false-label="0" :true-label="1"  label="公寓"></el-checkbox>
                  <el-checkbox v-model="type_is_ocean" :false-label="0" :true-label="1"  label="洋房"></el-checkbox>
                  <el-checkbox v-model="type_is_villa" :false-label="0" :true-label="1"  label="别墅"></el-checkbox>
                  <el-checkbox v-model="type_is_shops" :false-label="0" :true-label="1"  label="商铺"></el-checkbox>
                  <el-checkbox v-model="type_is_office" :false-label="0" :true-label="1"  label="写字楼"></el-checkbox>
                  <el-checkbox v-model="type_is_hotel" :false-label="0" :true-label="1"   label="酒店"></el-checkbox>
                  <el-checkbox v-model="type_is_housing" :false-label="0" :true-label="1"  label="住宅"></el-checkbox>
                </li>
              </ul>
            </div>
            <!-- 产品类型 end-->
            <!--置业顾问类型-->
            <div class="pub-title">
              置业顾问类型
            </div>
            <ul class="right">
              <li v-show="isShow" >
                <div class="right-title" >顾问</div>
                <div class="right-input right-box" >
                  <select @change="activeChange"  :attr-index="index"  name="index" v-for="(item,index) of options" :key="index"  placeholder="请选择" >
                    <option v-for="(items,index) of item" :key="index" :value="items.id" >
                          {{items.name}}
                    </option>
                  </select>
                </div>
              </li>
            </ul>
            <!--置业顾问类型-->
            <!--置业顾问-->
            <div class="type">
              <div class="pub-title">
                置业顾问
              </div>
              <div class="right">
                <button @click="addNewTodo">添加</button>
              </div>
            </div>
            <!--置业顾问-->
            <!-- 销售价格及状态 -->
            <div class="stor">
              <div class="pub-title">产品价格</div>
              <div class="stor-li">
                <div class="stor-title">起价</div>
                <div class="stor-input"><input type="" name="" v-model="formDatas.start_price" style="width:60%;border: 1px solid #a0a0a0;padding-left: 10px;" placeholder="请输入内容">元/㎡</div>
              </div>
              <div class="stor-li">
                <div class="stor-title">均价</div>
                <div class="stor-input"><input type="" name="" v-model="formDatas.average_price" style="width:60%;border: 1px solid #a0a0a0;padding-left: 10px;" placeholder="请输入内容">元/㎡</div>
              </div>
              <div class="stor-li">
                <div class="stor-title">状态</div>
                <div class="stor-input">
                  <select v-model="formDatas.status" placeholder="请选择" style="width:85%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in status1"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </div>
            </div>
            <!-- 销售价格及状态 end-->
            <!-- 付款方式及折扣 -->
            <div class="pay">
              <div class="pub-title">付款方式及折扣</div>
              <div class="pay-list">
                <div v-if="type_is_apartment === 1" class="pay-li">
                  <div class="pay-title">公寓</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formDatas.pmd_apartment_one" placeholder="请输入折扣" style="width:50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_apartment_mortgage" placeholder="请输入折扣" style="width:70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_apartment_stages" placeholder="请输入折扣" style="width:78%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
                <div v-if="type_is_ocean === 1" class="pay-li">
                  <div class="pay-title">洋房</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formDatas.pmd_ocean_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_ocean_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_ocean_stages" placeholder="请输入折扣" style="width: 78%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
                <div v-if="type_is_villa === 1" class="pay-li">
                  <div class="pay-title">别墅</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formDatas.pmd_villa_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_villa_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_villa_stages" placeholder="请输入折扣" style="width: 78%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
                <div v-if="type_is_shops === 1" class="pay-li">
                  <div class="pay-title">商铺</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formDatas.pmd_shops_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_shops_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_shops_stages" placeholder="请输入折扣" style="width: 78%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
                <div v-if="type_is_office === 1" class="pay-li">
                  <div class="pay-title">写字楼</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formDatas.pmd_office_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_office_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_office_stages" placeholder="请输入折扣" style="width: 78%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
                <div v-if="type_is_hotel === 1" class="pay-li">
                  <div class="pay-title">酒店</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formDatas.pmd_hotel_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_hotel_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_hotel_stages" placeholder="请输入折扣" style="width: 78%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
                <div v-if="type_is_housing === 1" class="pay-li">
                  <div class="pay-title">住宅</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formDatas.pmd_housing_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_housing_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formDatas.pmd_housing_stages" placeholder="请输入折扣" style="width: 78%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <!-- 付款方式及折扣 end-->
            <!-- 楼盘 -->
            <ul class="sale-list">
              <li>
                <div class="sale-l-title">代理楼盘</div>
                <div class="sale-l-input">
                  <select v-model="formDatas.agent_premises_id" placeholder="请选择" style="width:130%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in agent1"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="sale-l-title">佣金点位</div>
                <div class="sale-l-input">
                  <input type="" name="" v-model="formDatas.commission_point"  placeholder="请输入佣金"style="border: 1px solid #a0a0a0;padding-left: 10px;">
                </div>
              </li>
              <li>
                <div class="sale-l-title">成交奖励</div>
                <div class="sale-l-input">
                  <input type="" name="" v-model="formDatas.transaction_reward" placeholder="请输入奖励" style="border: 1px solid #a0a0a0;padding-left: 10px;">
                </div>
              </li>
              <li>
                <div class="sale-l-title">带看奖励</div>
                <div class="sale-l-input">
                  <input type="" name="" v-model="formDatas.belt_see_reward"placeholder="请输入奖励" style="border: 1px solid #a0a0a0;padding-left: 10px;">
                </div>
              </li>
            </ul>
            <!-- 楼盘 end-->
            <!-- 按钮 -->
            <div class="sale-btn">
              <!--<button>报备客户</button>-->
              <!--<button>生成广告海报</button>-->
              <span>
                <!--<button>楼栋房号添加</button>-->
                <el-button @click="onloupan" type="primary">保存</el-button>
              </span>
            </div>
            <!-- 按钮 end-->
          </div>
          <!-- info-right end-->
        </div>
        <div v-show="jibenpic">
          <!-- 上传图片 -->
          <div class="upload">
            <img src="../assets/img/home.png" alt="">
            <div>
              <button :class="{img_color:changeImg2 === index}" v-for="(item,index) in typeTitle" @click="changeImage(index)">
                {{item.title}}
              </button>
            </div>
            <h2>请选择类型后再上传图片</h2>
            <div class="upload">
              <el-upload
                class="upload-demo"
                ref="upload"
                action="http://kf.wuyoufang.cn/index/premises_file"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="testImg"
                accept="*"
                :data="file_data"
                :headers="headers"
                :auto-upload="false" multiple>
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过100M</div>
              </el-upload>
            </div>
          </div>
          <!--<div class="upload">-->
          <!--<el-upload-->
          <!--class="upload-demo"-->
          <!--ref="upload"-->
          <!--action="http://kf.wuyoufang.cn:81/index/premises_file"-->
          <!--:on-preview="handlePreview"-->
          <!--:on-remove="handleRemove"-->
          <!--accept="video/*"-->
          <!--:data="file_data"-->
          <!--:headers="headers"-->
          <!--:auto-upload="false">-->
          <!--<el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
          <!--<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
          <!--<div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过100M</div>-->
          <!--</el-upload>-->
          <!--</div>-->
          <!-- 上传图片 end-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import  {recoverBodyScroll} from '@/comm/js/dom.js'
  export default {
    props: {
      goSearch: {
        type: Function
      },
      LDmodal: {
        type: Function
      },
      SaleClosetwo: {
        type: Function
      },
      Close:{
        type:Function
      }
    },

    computed: {},
    data() {
      return {
        counselorArray:[],
        street: '',
        changeImg: 0,
        changeImg2:0,
        typeTitle: [
          {title: '效果图'},
          {title: '实景图'},
          {title: '样板间'},
          {title: '户型图'},
          {title: '交通图'},
          {title: '封面图'},
          {title: '视频'},
        ],
        headers: {token: '666'},
        file_data: {
          file_index: '',
          type_id: 0
        },
        croppa5: {
          name: '',
          type: 0,
          file_index: ''
        },
        transaction:'',
        premises_adviser_ids:[], //顾问

        jibeninfo: true,
        jibenpic: false,
        hotelchecked: false,
        aparchecked: false,
        writechecked: true,
        shopschecked: false,
        otherchecked: false,
        villachecked: false,
        dialogVisible: false,
        dialogImageUrl: '',
        property_year_1: [],
        property_year_2: [],
        property_year_3: [],
        property_year_4: [],
        property_year_5: [],
        property_year_6: [],
        property_year_7:[],
        agent1: [],// 代理楼盘
        status1: [],// 状态
        city_code1: [],
        area_code1: [],
        province_code1: [],
        renovation1: [],
        province_code:'',
        yushou: [
          {
            id: 0,
            title: '无'
          },
          {
            id: 1,
            title: '有'
          }
        ],
        housezheng: [
          {
            id: 0,
            title: '无'
          },
          {
            id: 1,
            title: '有'
          }
        ],
        // formDatas:{},
        formDatas: {
          file_index: '',


        },
        //顾问
        options:[],

        newTodoText: '',
        todos: [
          {
            id: 1,
            title: 'Do the dishes',
          }

        ],
        nextTodoId: 4,
        //顾问

        renovation_id:[],
        type_is_apartment:0,
        type_is_ocean:0,
        type_is_villa:0,
        type_is_shops:0,
        type_is_office:0,
        type_is_hotel:0,
        type_is_housing:0,
        isShow:false //顾问
      };
    },
    methods: {

      //暴露函数给父组件
      getHttp(){
        let that = this;
        that.$http.get('index/premises',{
          params: {
            renovation_id :that.formDatas.id
          }
        }).then(res=>{
          that.formDatas = res.data
          console.log(res)

        }).catch(err=>{
          console.log(err);
        })
      },
// 顾问

      addNewTodo: function () {

        this.isShow === true?(
          this.todos.push({
          id: this.nextTodoId++,
          title: this.newTodoText}
          )):'';

        this.isShow === false?(this.isShow = true):(this.isShow = true);

        this.newTodoText = ''

        this.$http.get('/index/premises/save_select_item').then(({data})=>{
           // console.log(data)
          let { adviser } = data;
          this.options.push(adviser);

          this.counselorArray.push(adviser[0].id);
          //console.log(adviser[0].id)

        })
      },

      //改变状态事件
      activeChange(e){

        let id = e.target.getAttribute('attr-index');
        this.counselorArray[id] = e.target.value;
        console.log(this.counselorArray);

      },

// 顾问
      testImg(response, file, fileList) {
        console.log(response + '---------' + file + '-----------' + fileList);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      changeImage(i) {
        this.changeImg2 = i;
        if(i < 4){
          this.changeImg = i;
        }else if (i = 4){
          this.changeImg = 5;
        } else {
          this.changeImg = 4;
        }

      },
      // //图片
      // submitUploadImg(){
      //   let fileAll = nw
      //   this.file_data.file_index = this.formDatas.file_index;
      //   this.headers.token = localStorage.token;
      //   this.fileList2.file_index = this.formDatas.file_index;
      //   console.log(this.fileList2);
      //
      // },
      //视频
      submitUpload() {
        this.file_data.file_index = this.formDatas.file_index;
        this.file_data.type_id = this.changeImg + 1;
        this.headers.token = localStorage.token;
        this.croppa5.file_index = this.formDatas.file_index;
        this.croppa5.type = this.changeImg + 1;
        console.log(this.croppa5);
        this.$refs.upload.submit();
      },
      infocli() {
        this.jibeninfo = true;
        this.jibenpic = false;
      },
      piccli() {
        this.jibeninfo = false;
        this.jibenpic = true;
      },
      SaleClose() {
        recoverBodyScroll();
        //恢复滚动条
        this.SaleClosetwo();
        this.formDatas = {};
        this.street= '';
        this.type_is_apartment = 0;
        this.type_is_ocean = 0;
        this.type_is_villa = 0;
        this.type_is_shops = 0;
        this.type_is_office = 0;
        this.type_is_hotel = 0;
        this.type_is_housing = 0;
      },
      getprovinceone() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: 'CN'
          }
        }).then(response => {
          let data = response.data.res;
          that.province_code1 = data;
        });
      },
      getCity() {
        let that = this;
        that.formDatas.city_code = '';
        that.city_code1 = [];
        that.formDatas.area_code = '';
        that.area_code1 = [];
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: 'CN',
            upper_region: that.formDatas.province_code
          }
        }).then(res => {
          let data = res.data.res;
          that.city_code1 = data;
        });
      },
      getArea() {
        let that = this;
        that.formDatas.area_code = '';
        // that.formDatas.street = '';
        that.area_code1 = [];
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: 'CN',
            upper_region: that.formDatas.city_code
          }
        }).then(res => {
          let data = res.data.res;
          this.area_code1 = data;
        });
      },
      // getStreet() {
      //   let that = this;
      //   // that.formDatas.street_id = '';
      //   // that.area_code1 = [];
      //   that.$http.get('/newapi/Area/getAreaStreetlist', {
      //     params: {
      //       country_code: 'CN',
      //       upper_region: that.formDatas.area_code
      //     }
      //   }).then(res => {
      //     let data = res.data.res;
      //     // this.street_id1 = data;
      //   });
      // },

      getloupan() {
        let that = this;
        that.$http.get('/index/premises/save_select_item', {
          params: {}
        }).then(res => {
          that.renovation1 = res.data.renovation;
          that.agent1 = res.data.agent;
          that.status1 = res.data.status;
          that.formDatas.file_index = res.data.file_index;
          that.property_year_1 = res.data.property_year;
          that.property_year_2 = res.data.property_year;
          that.property_year_3 = res.data.property_year;
          that.property_year_4 = res.data.property_year;
          that.property_year_5 = res.data.property_year;
          that.property_year_6 = res.data.property_year;
          that.property_year_7 = res.data.property_year;

          // console.log(that.formDatas.file_index )
        }).catch(err => {
          console.log(err);
        });
      },
      onloupan() {
        let that = this;
         that.formDatas.premises_adviser_ids = that.counselorArray;  //置业顾问


        // that.formDatas.street = that.street;
        that.formDatas.type_is_apartment = that.type_is_apartment;
        that.formDatas.type_is_ocean = that.type_is_ocean;
        that.formDatas.type_is_villa = that.type_is_villa;
        that.formDatas.type_is_shops = that.type_is_shops;
        that.formDatas.type_is_office = that.type_is_office;
        that.formDatas.type_is_hotel = that.type_is_hotel;
        that.formDatas.type_is_housing = that.type_is_housing;
        that.formDatas.renovation_id = that.renovation_id;

        that.$http.post('/index/premises', that.formDatas
        ).then(res => {
          if (res.data.status === 0) {

            //提交成功了,关闭弹窗

            that.SaleClose();
            that.formDatas = {};

            that.counselorArray = [];
            that.options = [];
            that.$store.state.messageString = res.data.msg;
            that.pushTo = '';
            that.goSearch();
            that.LDmodal();
          } else {
            that.$store.state.messageString = res.data.msg;
            that.pushTo = '';
            //模态框
            that.LDmodal();
            that.counselorArray = [];  //置业顾问
            that.options = [];
            that.formDatas = {};

            if(!res.data.error_code){
                setTimeout(()=>{
                  that.SaleClose();
                  that.Close();

               },2000)
            }

          }
        }).catch(err => {
          //提交失败 服务器返回500会走这里
           that.options = [];
           that.counselorArray = [];  //置业顾问

           that.getloupan(); //重置file_index

           alert('提交失败！请重新提交');

        });
      }
    },
    created() {
      this.getprovinceone();
    },
    mounted() {
      // this.getloupan();
    }
  };
</script>
<style scoped>
  * {
    padding: 0;
    margin: 0
  }
  .image_upload {
    height: 60px;
    width: 60px;
    background: red
  }


  .sale-btn {
    top: 50px;
    width: 96%;
    padding: 0 3%;
    text-align: center;
    position: relative;
  }



  .title_class {
    background: #fff;
    color: #415dba;
  }

  .sale-btn button {
    padding: 10px 20px;
    color: #fff;
    border: none;
    border-radius: 5px;
    margin-right: 10px;
  }

  .sale-l-input {
    width: 48%;
    float: left;
  }

  .sale-l-input input {
    width: 94%;
    cursor:pointer;
  }

  .sale-l-title {
    width: 33%;
    line-height: 27px;
    padding-left: 4%;
    float: left;
  }

  .sale-list {
    margin-top: 10px;
    border-top: 5px solid #f9f9f9;
    width: 100%;
    float: left;
  }

  .sale-list li {
    float: left;
    width: 25%;
    margin-top: 20px;
  }

  .pay-input p {
    float: left;
    width: 33.333333337%;
  }

  .pay-title {
    width: 8%;
    padding-left: 2%;
    float: left;
    line-height: 27px;
  }

  .pay-input {
    width: 90%;
    float: left;
  }

  .pay-input input {
    width: 50%;
    margin-right: 5px;
    padding-left: 5%;
    margin: 0 5px;
  }

  .pay-li {
    margin-top: 10px;
    width: 100%;
    float: left;
  }

  input {
    line-height: 27px;
    height: 27px;
    border: 1px solid #d3d3d3;
  }

  .pay-list {
    width: 100%;
    float: left;
  }

  .stor-input input {
    width: 50%;
    margin-right: 10px;
    line-height: 27px;
    height: 27px;
    border: 1px solid #d3d3d3;
    cursor:pointer;
  }

  .stor-input {
    width: 80%;
    float: left;

  }

  .stor-title {
    width: 20%;
    line-height: 27px;
    float: left;
    text-align: center;
  }

  .stor-li {
    margin-top: 10px;
    width: 33.333333333%;
    float: left;
  }

  .stor {
    width: 100%;
    float: left;
    margin-bottom: 10px;
  }

  .type {
    width: 100%;
    float: left;
  }

  .right-input {
    width: 60%;
    float: left;
    display: flex;
  }

  .right-input input {
    padding-left: 5%;
    float: left;
    line-height: 27px;
    height: 27px;
    border: 1px solid #d3d3d3;
    width: 87%;

  }

  .right{
    width: 100%;
    float: left;
    text-align: center;
  }
  /*装修*/
  .right span{
    float: left;
    left: 28%;
    display: flex;
    width: 12.4%;
    position: relative;
  }

  .right-title {
    width: 40%;
    text-align: center;
    line-height: 27px;
    float: left;
  }

  .right li {
    margin-top: 10px;
    width: 16.666666666%;
    float: left;
  }

  .info-right {
    width: 65%;
    margin-top: 65px;
    float: left;
  }

  .dialog-img {
    float: right;
  }

  .upload-li {
    width: 100%;
    float: left;
    margin-top: 10px;
  }

  .upload:nth-child(1) {
    width: 100%;
    padding: 0 3%;
    box-sizing: border-box;
    border-top: 5px solid #f9f9f9;
    /*padding-bottom: 10px;*/
    margin-top: 50px;
  }

  .upload {
    width: 100%;
    padding: 3% 3%;
    box-sizing: border-box;
    border-top: 5px solid #f9f9f9;
    /*padding-bottom: 10px;*/
  }

  .upload button {
    background: #ed7d31;
    border-radius: 5px;
    padding: 5px 10px;
    border: none;
    margin-left: 10px;
  }

  .upload button:hover {
    background: #55a532;
  }

  .info-list li {
    width: 50%;
    float: left;
    margin-top: 10px;
  }

  .info-input input {
    width: 80%;
    padding-left: 5%;
    float: left;
    line-height: 27px;
    height: 27px;
    border: 1px solid #d3d3d3;
    cursor:pointer;
  }

  .info-input {
    width: 65%;
    float: left;
  }
  .info-input_box{
    width:240%;
    position: relative;
    float: left;
    padding-left: 10px;
    cursor:pointer;
  }

  .info-title {
    width: 35%;
    line-height: 27px;
    float: left;
    text-align: center;
  }

  .info-list {
    width: 100%;
    float: left;
    margin-top: 20px;
    padding-bottom: 10px;
  }

  .info {
    width: 35%;
    float: left;
    /*height: 100%;*/
    margin-top: 20px;
    box-sizing: border-box;
    border-right: 5px solid #f9f9f9;
  }

  .pub-title {
    margin-top: 15px;
    font-size: 1.1em;
    font-weight: bold;
    margin-left: 15px;
  }

  .sale {
    width: 67%;
    height: 465px;
    background: #fff;
    position: absolute;
    left: 23%;
    z-index: 10;
    top: 15%;
    border-radius: 5px;
    overflow: hidden;
    overflow-y: auto;
    box-shadow: #e8e7e7 0px 0px 10px;
  }

  .img_color {
    background-color: #55a532 !important;
    color: #fffdef;
  }
  img:hover {
    background: #bd2c00 !important;
    color: #ffffff;
  }

  img{
    /*position: fixed;*/
    flex-star:40px;
    /*margin-left: 44%;*/
    position: relative;
    border-radius: 10px;

  }
  img{
    left: 113%;
    top: 3px;
  }
  .rele-titles {
    width: 56.6%;
    padding: 0 .3%;
    line-height: 50px;
    font-size: 2em;
    color: #000;
    background: #f5f5f7;
    position: fixed;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    padding-right: 200px;
    cursor:pointer;
  }
  .right_Up{
    font-weight:bold;
  }
  /*楼盘概况*/
  .modal{
    position: fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    z-index:1000;
    overflow:hidden !important;

  }
  select{
    cursor:pointer;
  }

/*置业顾问 */
.right button{
  width: 6%;
  height: 30px;
  background-color:  #409EFF;;
  border: none;
  cursor:pointer;
  border-radius: 5px;
  color: #fff;

}
.right-box select{
  width: 90px;
  height: 28px;
  margin-left: 10px;
}


</style>
